<template>
	<div id="header">
			<div class="nav-global">
				<div class="container">
					<h1 class="nav-logo">
						<a href="javascript:;"></a>
					</h1>
					<ul class="nav-aside">
						<li class="nav-user">
							<a href="javascript:;">个人中心</a>
							<!--active-->
							<div class="nav-user-wrapper">
								<div class="nav-user-list">
									<dl class="nav-user-avatar">
										<dd><span class="ng-scope"></span></dd>
										<dt class="ng-binding">+86 138****9453</dt>
									</dl>
									<ul>
										<router-link tag='li'  class="order" to='/account'><a href="javascript:;">我的订单</a></router-link>
										<li class="support"><a href="javascript:;">售后服务</a></li>
										<li class="coupon"><a href="javascript:;">我的优惠</a></li>
										<li class="information"><a href="javascript:;">账户资料</a></li>
										<li class="address"><a href="javascript:;">收货地址</a></li>
										<li class="logout"><a href="javascript:;">退出</a></li>
									</ul>
								</div>
							</div>
						</li>
						<!--active-->
						<carPanel></carPanel>
					</ul>
					<ul class="nav-list">
						<li><a href="javascript:;">在线商城</a></li>
						<li><a href="javascript:;">坚果 Pro</a></li>
						<li><a href="javascript:;">Smartisan M1 / M1L</a></li>
						<li><a href="javascript:;">Smartisan OS</a></li>
						<li><a href="javascript:;">欢喜云</a></li>
						<li><a href="javascript:;">应用下载</a></li>
						<li><a href="javascript:;">官方论坛</a></li>
					</ul>
				</div>
			</div>
			<div class="nav-sub" :class="{active:isActive}">
				<div class="nav-sub-wrapper">
					<div class="container">
						<ul class="nav-list">
							<li><router-link to='/Home'>首页</router-link></li>
							<li  v-on:mouseover='add' v-on:mouseout='del'><router-link to='' >手机</router-link></li>
							<li><router-link to='/PageOne'>“足迹系列”手感膜</router-link></li>
							<li class="active"><router-link to='/Shop'>官方配件</router-link></li>
							<li><router-link to='/PageTwo'>周边产品</router-link></li>
							<li><router-link to='/PageThree'>第三方配件</router-link></li>
							<li><router-link to='/PageFour'>全部商品</router-link></li>
							<li><router-link to='/PageFive'>服务</router-link></li>
						</ul>
					</div>
				</div>
                 
			</div>
			
	</div>

</template>

<script>
import carPanel from './car-panel'
import Phone from './phone'
	export default {
		data(){
			return{
				isActive :false
			}
		},
		methods:{
			add : function(){
				this.isActive = true
				console.log(this.isActive)
			},
			del : function(){
				this.isActive = false
				console.log(this.isActive)
			}
		},
		components:{
			carPanel,
			Phone
		}
	}
</script>

<style>
</style>